<template>
  <div>
    <div class="headerSection">
      <split-vertical title="采购计划"></split-vertical>
      <v-form :formProps="searchForm" ref="form"
              v-on:handleReset="handleReset"
              v-on:coverFormData="coverFormData"></v-form>
    </div>
    <div class="stand">
      <div style="line-height:50px;margin-left:10px;">
        <div style="float: right;font-size: 14px;color: #3D3D3D;font-weight: 600 ">采购总金额￥: <span style="color: red;font-size: 16px;margin-right: 20px">{{totalPrice}}</span></div>
        <v-button style="float: left;" :operationBtnArray="operationBtnArray" v-on:handleSearchTopBtn="handleSearchTopBtn"> </v-button>
      </div>
      <div style="margin:0 10px;">
        <v-table :tableParams="tableParams" v-on:handleOperation="handleOperation"></v-table>
      </div>
    </div>
    <div class="pagination page-right">
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[10]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageCount">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  const purOrderTypeData = {
    '1': '常规订单',
    '2': '集采订单',
    '3': '天猫订单'
  };
  const planStatus = {
    '1': '待处理',
    '2': '已处理'
  };
  import VTable from "components/common/PageTable/VTable"
  import VForm from "components/common/VForm"
  import VButton from "components/common/VButton"
  import SplitVertical from "components/common/SplitVertical"
  import {localStorage} from 'js/localStorage'

  export default {
    components: {
      VForm, VTable, VButton, SplitVertical
    },
    data() {
      return {
        totalPrice:'0',
        operationBtnArray: [{
          text: '刷新',
          show: true,
          icon:'el-icon-refresh',
          type: 'primary',
          methodName: 'refresh',
        }, {
          text: '新增',
          show: true,
          icon:'el-icon-plus',
          type: 'success',
          methodName: 'add',
        }],
        searchCondition: {},
        searchForm: {
          col: 4,
          labelWidth: '100px',
          submitBtn: {
            text: '搜索'
          },
          formItemArray: [{
            label: '开始时间',
            prop: 'startBurBillsDate',
            placeholder: "请选择计划开始时间",
            itemType: 'dateTime',
            value: ''
          }, {
            label: '结束时间',
            prop: 'endBurBillsDate',
            placeholder: "请选择计划结束时间",
            itemType: 'dateTime',
            value: ''
          }, {
            label: '供应商',
            placeholder: "请选择",
            prop: 'supplyId',
            itemType: 'select',
            options: [],
            value: ''
          }, {
            label: '申请人',
            placeholder: "请输入",
            prop: 'name',
            value: ''
          }],
        },
        //分页
        pageIndex: 1,
        pageSize: 10,
        pageCount: null,
        userId: '',
        tableParams: {
          dataArray: [],
          showMultiSelection: false,
          columnArray: [
            {label: '订单类型', prop: 'purOrderType', sortable: false, width: '80'},
            {label: '计划状态', prop: 'status', sortable: false, width: '80'},
            {label: '创建时间', prop: 'createTime'},
            {label: '采购总金额', prop: 'totalPrice', width: "100"},
            {label: '采购商品金额', prop: 'price', width: "130"},
            {label: '其他总费用', prop: 'elsePrice', width: "100"},
            {label: '商品总数量', prop: 'total', width: "100"},
            {label: '订单日期', prop: 'purBillsDate'},
            {label: '预计到货时间', prop: 'predictTime',width:'120', sortable: false},
            {label: '采购公司', prop: 'companyName', sortable: false},
            {label: '仓库', prop: 'depotName', sortable: false, width: "100"},
            {label: '供应商', prop: 'supplyName', sortable: false},
            {label: '申请人', prop: 'userName', sortable: false, width: "80"},
          ],
          rowHandle: {
            view: {
              show: false
            },
          }
        },
      }
    },
    mounted() {
      if (this.$route.query.searchCondition) {
        this.searchCondition = Object.assign({}, JSON.parse(this.$route.query.searchCondition));
        this.searchForm.formItemArray.forEach(item => {
          for (let key in this.searchCondition) {
            if (item.prop === key) {
              item.value = this.searchCondition[key];
            }
          }
        });
        this.pageIndex = this.searchCondition.pageIndex;
      }
      this.getSupply();
      this.userId = localStorage.get('userID');
      this.purchasePlanList();
    },
    methods: {
      handleSearchTopBtn(methodName) {
        if (methodName === "refresh") {
          this.refresh();
        } else {
          this.create();
        }
      },
      handleReset(formName) {
        this.$refs.form.resetForm(formName);
      },
      coverFormData(data) {
        this.searchCondition = data;
        this.pageIndex = 1;
        this.purchasePlanList();
      },
      handleOperation(rowIndex, row, methodName) {
        switch (methodName) {
          case 'update':
            this.$router.push({
              path: '/purchase-plan-edit',
              query: {action: 'edit', purId: row.id, searchCondition: JSON.stringify(this.searchCondition)}
            });
            break;
          case 'delete':
            this.tips.ConfirmModal('确认要删除吗？', () => {
              this.deletePurchasePlan(row.id);
            });
            break
        }
      },
      deletePurchasePlan(id) {
        let success = data => {
          if (data.code === 'OK') {
            this.purchasePlanList();
            this.tips.MessageModal('success', '删除成功！');
          } else {
            this.$message.error(data.msg);
          }
        };
        this.api.delPurchasePlan(id, success);
      },
      purchasePlanList() {
        let param = this.searchCondition;
        if (!param.pageIndex || !param.pageSize) {
          param['pageIndex'] = this.pageIndex;
          param['pageSize'] = this.pageSize;
        }
        let success = data => {
          if (data.code === 'OK') {
            this.totalPrice= data.data.totalPrice;
            this.pageCount = data.data.pageCount;
            this.tableParams.dataArray = data.data.data;
            this.tableParams.dataArray.forEach(element => {
              element.totalPrice = this.calculate.operation( element.price , element.elsePrice,'+');
              element.purBillsDate = this.formatSystemDate(element.purBillsDate);
              element.predictTime = this.formatSystemDate(element.predictTime);
              element.createTime = this.formatSystemDate(element.createTime);
              element.purOrderType = purOrderTypeData[element.purOrderType];
              element.status = planStatus[element.status];
              // element.price = this.currency.numFormat(element.price);
              // element.elsePrice = this.currency.numFormat(element.elsePrice);
            });
          } else {
            this.$message.error(data.msg);
          }
        };
        this.api.purchasePlanList(param, success);
      },
      refresh() {
        this.purchasePlanList();
      },
      create() {
        this.$router.push({
          path: '/purchase-plan-edit',
          query: {action: 'add'}
        });
      },
      getSupply() {
        let success = data => {
          if (data.code === 'OK') {
            this.searchForm.formItemArray.forEach(item => {
              if (item.prop === 'supplyId') {
                item.options = this.buildExceptKeyAndValue(data.data, "supplyName", "id", "label", "value");
              }
            });
          } else {
            this.$message.error(data.msg)
          }
        }
        this.api.getSupply({}, success);
      },
      //当前页
      handleCurrentChange(val) {
        this.pageIndex = val;
        this.searchCondition['pageIndex'] = val;
        this.purchasePlanList();
      },
    },

  }
</script>

<style lang="scss" scoped>
  .headerSection{
    background:#fff;
    height:145px;
    padding:0 10px;
    border-left: 2px solid #e8e8e8;
    border-right: 2px solid #e8e8e8;
    border-bottom: 2px solid #e8e8e8;

  }
  .page-right {
    text-align: right;
    padding: 10px 0;
  }
</style>

